<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.webcam.min.js"></script>
    <script type="text/javascript" src="js/jquery.facedetection.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var w = 320, h = 240;                                       //摄像头配置,创建canvas
            var pos = 0, ctx = null, saveCB, image = [];
            var canvas = document.createElement("canvas");
            $("body").append(canvas);
            canvas.setAttribute('width', w);
            canvas.setAttribute('height', h);
            ctx = canvas.getContext("2d");
            image = ctx.getImageData(0, 0, w, h);

            $("#webcam").webcam({
                width: w,
                height: h,
                mode: "callback",                       //stream,save，回调模式,流模式和保存模式
                swffile: "js/jscam_canvas_only.swf",
                onTick: function (remain) {
                    if (0 == remain) {
                        $("#status").text("拍照成功!");
                    } else {
                        $("#status").text("倒计时" + remain + "秒钟...");
                    }
                },
                onSave: function (data) {              //保存图像
                    var col = data.split(";");
                    var img = image;
                    for (var i = 0; i < w; i++) {
                        var tmp = parseInt(col[i]);
                        img.data[pos + 0] = (tmp >> 16) & 0xff;
                        img.data[pos + 1] = (tmp >> 8) & 0xff;
                        img.data[pos + 2] = tmp & 0xff;
                        img.data[pos + 3] = 0xff;
                        pos += 4;
                    }
                    if (pos >= 4 * w * h) {
                        ctx.putImageData(img, 0, 0);      //转换图像数据，渲染canvas
                        pos = 0;
                        Imagedata = canvas.toDataURL().substring(22);  //上传给后台的图片数据
                    }
                },
                onCapture: function () {               //捕获图像
                    webcam.save();
                },
                debug: function (type, string) {       //控制台信息
                    console.log(type + ": " + string);
                },
                onLoad: function () {                   //flash 加载完毕执行
                    console.log('加载完毕！')
                    var cams = webcam.getCameraList();
                    for (var i in cams) {
                        $("body").append("<p>" + cams[i] + "</p>");
                    }

                }

            });

            $(".play").click(function () {
                webcam.capture(0);
                //拍照，参数5是倒计时
            });
        });
function feace() {
    $('#picture').faceDetection({
        complete: function (faces) {
            if (faces==""){
                alert("请将脸对准摄像头")
            } else {
                alert("识别成功"+faces.toString())
            }            console.log(faces+"dddd");
        }
    });
}
    </script>

</head>

<body>
<button class="play">拍照</button>
<div id="status">倒计时</div>
<div id="webcam"></div>
<button onclick="feace()">人脸识别</button>
<img id="picture" src="imgs/微信图片_20190525145339.png">
</body>
</html>